<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- start: Meta -->
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="Bootstrap Metro Dashboard">
    <meta name="author" content="">
    <meta name="keyword" content="">
    <!-- end: Meta -->

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- end: Mobile Specific -->

    <!-- start: CSS -->
    <link id="bootstrap-style" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/bootstrap-responsive.min.css}" rel="stylesheet">
    <link id="base-style" th:href="@{/css/style.css}" rel="stylesheet">
    <link id="base-style-responsive" th:href="@{/css/style-responsive.css}" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext'
          rel='stylesheet' type='text/css'>
    <!-- end: CSS -->

    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <link id="ie-style" href="../static/css/ie.css" rel="stylesheet">
    <![endif]-->

    <!--[if IE 9]>
    <link id="ie9style" href="../static/css/ie9.css" rel="stylesheet">
    <![endif]-->

    <!-- start: Favicon -->
    <link rel="shortcut icon" th:href="@{/img/favicon.ico}">
    <!-- end: Favicon -->
    <link th:href="@{/css/login.css}" rel="stylesheet">

    <style type="text/css">
        .login-btn {
            display: flex;
            justify-content: center;
            width: 400px;
        }

        .login-btn > button {
            width: 168px;
        }
    </style>
</head>

<body class="login-bg">
<div class="container-fluid-full">
    <div class="row-fluid">
        <div class="row-fluid">
            <div class="login-box">
                <!--<div class="icons">
                    <a href="index.html"><i class="halflings-icon home"></i></a>
                    <a href="#"><i class="halflings-icon cog"></i></a>
                </div>-->
                <h2>账户登录</h2>
                <!--<form id="loginForm" class="form-horizontal">-->
                <form id="loginForm" class="form-horizontal" th:action="@{/manager/login}" method="post" onsubmit="return toLogin()">
                    <fieldset>
                        <div class="input-prepend" title="Username">
                            <span class="add-on"><i class="halflings-icon user"></i></span>
                            <input class="input-large span10" name="managerName" id="username" type="text" placeholder="输入用户名"/>
                        </div>
                        <div class="clearfix"></div>
                        <div class="input-prepend" title="Password">
                            <span class="add-on"><i class="halflings-icon lock"></i></span>
                            <input class="input-large span10" name="managerPwd" id="password" type="password" placeholder="输入密码"/>
                        </div>
                        <div class="clearfix"></div>
                        <!-- <label class="remember" for="remember"><input type="checkbox" id="remember" />记住密码</label> -->
                        <div class="button-login login-btn">
                            <!--<button type="submit" class="btn btn-primary" onclick="toLogin();return false">Login</button>-->
                            <button type="submit" class="btn btn-primary">登录</button>
                        </div>
                        <div class="clearfix"></div>
                    </fieldset>
                </form>
                <div style="width: 400px;height: 30px;display: inline-block;text-align: center;">
                    <span th:text="${message}" style="color: red;font-size: 15px;" id="errorMessage"></span>
                </div>
                <!--<h3>Forgot Password?</h3>
                <p>
                    No problem, <a href="#">click here</a> to get a new password.
                </p>-->
            </div>
            <!--/span-->
        </div>
        <!--/row-->
    </div>
    <!--/.fluid-container-->
</div>
<!--/fluid-row-->
<div class="common-modal modal fade" id="common-Modal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <ul class="list-inline item-details">
            <li><a href="http://sc.chinaz.com">Admin templates</a></li>
            <li><a href="http://sc.chinaz.com">Bootstrap themes</a></li>
        </ul>
    </div>
</div>
<!-- start: JavaScript-->
<script type="text/javascript">
    function toLogin() {
        var managerName = $("form").find("input[name=managerName]").val().replace(/(^\s*)|(\s*$)/g, '');
        var managerPwd = $("form").find("input[name=managerPwd]").val().replace(/(^\s*)|(\s*$)/g, '');
        if (managerName == '' || managerName == undefined || managerName == null) {
            $("form").find("input[name=managerName]").focus();
            $("#errorMessage").html("用户名输入不能为空!");
            return false;
        } else if (managerName.length < 5 || managerName.length > 10) {
            $("form").find("input[name=managerName]").focus();
            $("#errorMessage").html("用户名输入范围为 5 ~ 10!");
            return false;
        }
        if (managerPwd == '' || managerPwd == undefined || managerPwd == null) {
            $("form").find("input[name=managerPwd]").focus();
            $("#errorMessage").html("密码输入不能为空!");
            return false;
        } else if (managerPwd.length < 6 || managerPwd.length > 12) {
            $("form").find("input[name=managerPwd]").focus();
            $("#errorMessage").html("密码输入范围为 6 ~ 12!");
            return false;
        }
        return true;
    }
</script>

<script th:src="@{/js/jquery-1.9.1.min.js}"></script>

<script th:src="@{/js/jquery-migrate-1.0.0.min.js}"></script>

<script th:src="@{/js/jquery-ui-1.10.0.custom.min.js}"></script>

<script th:src="@{/js/jquery.ui.touch-punch.js}"></script>

<script th:src="@{/js/modernizr.js}"></script>

<script th:src="@{/js/bootstrap.min.js}"></script>

<script th:src="@{/js/jquery.cookie.js}"></script>

<script th:src='@{/js/fullcalendar.min.js}'></script>

<script th:src='@{/js/jquery.dataTables.min.js}'></script>

<script th:src="@{/js/excanvas.js}"></script>

<script th:src="@{/js/jquery.flot.js}"></script>

<script th:src="@{/js/jquery.flot.pie.js}"></script>

<script th:src="@{/js/jquery.flot.stack.js}"></script>

<script th:src="@{/js/jquery.flot.resize.min.js}"></script>

<script th:src="@{/js/jquery.chosen.min.js}"></script>

<script th:src="@{/js/jquery.uniform.min.js}"></script>

<script th:src="@{/js/jquery.cleditor.min.js}"></script>

<script th:src="@{/js/jquery.noty.js}"></script>

<script th:src="@{/js/jquery.elfinder.min.js}"></script>

<script th:src="@{/js/jquery.raty.min.js}"></script>

<script th:src="@{/js/jquery.iphone.toggle.js}"></script>

<script th:src="@{/js/jquery.uploadify-3.1.min.js}"></script>

<script th:src="@{/js/jquery.gritter.min.js}"></script>

<script th:src="@{/js/jquery.imagesloaded.js}"></script>

<script th:src="@{/js/jquery.masonry.min.js}"></script>

<script th:src="@{/js/jquery.knob.modified.js}"></script>

<script th:src="@{/js/jquery.sparkline.min.js}"></script>

<script th:src="@{/js/counter.js}"></script>

<script th:src="@{/js/retina.js}"></script>

<script th:src="@{/js/custom.js}"></script>
<!-- end: JavaScript-->

</body>

</html>